<template>
  <!-- 车辆信息表单 -->
  <el-form
    :inline="true"
    ref="formData"
    :model="formData"
    :rules="rules"
    label-width="100px"
    label-position="right"
  >
    <el-row>
      <el-col :span="12">车辆信息</el-col>
    </el-row>
    <el-divider content-position="center"></el-divider>
    <el-row>
      <el-col :span="6">
        <el-form-item label="客户类型:" prop="type" style="width: 292px">
          <el-radio-group v-model="formData.giveType">
            <el-radio-button :label="0">车主</el-radio-button>
            <el-radio-button :label="1">他人</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="6" v-if="workOrderType !== 3">
        <el-form-item label="工单编号:" prop="workOrderCode">
          <el-input clearable disabled v-model="formData.workOrderCode" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="送修人姓名:" prop="sendRepairName">
          <el-input clearable v-model="formData.sendRepairName" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="联系方式:" prop="sendRepairPhone">
          <el-input clearable v-model="formData.sendRepairPhone" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="服务接待:" prop="receptionName">
          <el-input clearable v-model="formData.receptionName" @focus="employeeFocus()" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车牌号:" prop="cars.licensePlateNumber">
          <el-input clearable v-model="formData.cars.licensePlateNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车型:" prop="cars.carModels">
          <CarModel
            v-model="formData.cars.carModels"
            ref="carModel"
            placeholder="车型组件"
          />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="VIN:" prop="cars.vin">
          <el-input clearable v-model="formData.cars.vin" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="入厂里程数:" prop="inFactoryMileage">
          <el-input clearable v-model="formData.inFactoryMileage" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="入场油量:" prop="inFactoryOil">
          <OilNum v-model="formData.inFactoryOil" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="接车时间:" prop="receiveCarTime">
          <el-date-picker
            v-model="formData.receiveCarTime"
            type="datetime"
            style="width: 195px"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="visible"
      width="1300px"
      title="服务接待列表"
      @close="dialogClose"
    >
      <EmployeeTable
        @roleIdListSelectCheck="employeListSelectCheck"
        :checkList="[formData.manageUserName]"
      />
    </el-dialog>
  </el-form>
</template>
<script>
import { OilNum, CarModel } from "@/components/index"; //导入组件库
import { rapidGetWorkOrderCode } from "@/api/after-sale/workOrderManage/fast"; //快速单api
import { washGetWorkOrderCode } from "@/api/after-sale/workOrderManage/car-wash"; //洗车单api
import { getDict, objectAssignment, getUser } from "@/utils";
import EmployeeTable from "@/views/after-sale/systemManage/store/components/EmployeeTable";
export default {
  components: {
    OilNum,
    CarModel,
    EmployeeTable,
  },
  props: {
    formValue: {
      type: Object,
      default: () => {
        return {};
      },
    },
    workOrderType: {
      type: Number,
      default: 1, //1 快速单 2 综合单
    },
  },
  data() {
    return {
      formData: {
        // couponIds: '',//	string优惠券ids
        // discountsAmount: 0,//	number($double)优惠金额
        giveType: 0, //	boolean送修人0-车主 1-他人
        // id: '',//	integer($int32)快速单id
        inFactoryMileage: "", //	integer($int32)入厂里程
        inFactoryOil: 0, //	integer($int32)入场油量
        // pickCarId: '',//	integer($int32)接车单id–接车单转工单的才有
        // predictDeliveryDate: '',//	string($date-time)预计交车时间
        // receiptsTime: '',//	string($date-time)单据日期
        receiveCarTime: "", //	string($date-time)接车日期
        receptionName: "", //	string服务接待
        // receptionId:'',// 接待人id
        // shouldAmount: 0,//	number应收金额
        // storeId: '',//	integer($int32)门店id
        workOrderCode: "", //	string工单编号
        cars: {
          //车辆
          licensePlateNumber: "",
          carBrandName: "",
          carModelId: "",
          vin: "",
          carModels: [], //车厢信息
        },
        //车主
        sendRepairName: "",
        sendRepairPhone: "",
      },
      workOrderCode: "",
      dict: {}, //字典
      visible: false,
      rules: {
        sendRepairName: [{ required: true, message: "请输入", trigger: "blur" }],
        sendRepairPhone: [{ required: true, message: "请输入", trigger: "blur" }],
        receptionName: [{ required: true, message: "请输入", trigger: "blur" }],
        inFactoryMileage: [{ required: true, message: "请输入", trigger: "blur" }],
        inFactoryOil: [{ required: true, message: "请输入", trigger: "blur" }],
        receiveCarTime: [{ required: true, message: "请输入", trigger: "blur" }],
        "cars.carModels": [
          {
            required: true,
            trigger: "change",
            validator: (rule, value, callback) => {
              if (Array.isArray(value) && value.length > 0) {
                callback();
              } else {
                callback("请选择车型");
              }
            },
          },
        ],
      }, //表单校验
    };
  },
  watch: {
    formValue: {
      deep: true,
      handler(newValue, oldValue) {
        console.log("carInfo组件更新监听", newValue);
        this.$refs.carModel.show = false;
        let { cars, discountInterval, member, ...data } = newValue;
        this.formData = objectAssignment(this.formData, {
          ...newValue,
        });
        if (this.formData.workOrderCode === null || this.formData.workOrderCode === "") {
          this.formData.workOrderCode = this.workOrderCode;
        }
        if (cars) {
          this.formData.cars.carModels = [
            cars.carBrandId,
            cars.carSeriesId,
            cars.timeType,
            cars.carModelId,
          ];
        }
        setTimeout(() => {
          this.$refs.carModel.show = true;
        }, 100);
      },
    },
  },
  methods: {
    //打开员工选择列表
    employeeFocus() {
      console.log(111);
      this.visible = true;
    },
    dialogClose() {
      this.visible = false;
    },
    //员工选择
    employeListSelectCheck(select) {
      this.formData.receptionName = select[0].userName;
      this.formData.receptionId = select[0].id;
      this.visible = false;
    },
  },
  async created() {
    this.dict = getDict(["服务接待"]);
    //工单类型为3时 编号生成有工单信息模块生成
    if (this.workOrderType !== 3) {
      //获取工单编号
      let { data } =
        this.workOrderType == 2
          ? await washGetWorkOrderCode()
          : await rapidGetWorkOrderCode();
      this.formData.workOrderCode = data;
      this.workOrderCode = data;
    }
  },
  mounted() {
    let user = getUser();
    this.formData.receptionName = user.name;
    this.formData.receptionId = user.id;
  },
};
</script>
